<template>
  <div class="app-container">
    <zl-table ref="table" url="/message/sendList" :param.sync="par" :default-sort="{prop:'createDt',order:'descending'}">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="标题">
            <el-input v-model="par.title" clearable placeholder="输入参数名" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="par.status" placeholder="请选择" clearable>
              <el-option label="待发送" :value="1" />
              <el-option label="成功" :value="2" />
              <el-option label="失败" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="toolbar">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button size="small" plain type="danger" icon="el-icon-delete" @click="deleteMsg">删 除</el-button>
          </el-col>
        </el-row>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column align="center" type="selection" width="50"/>
        <el-table-column align="center" width="40px" prop="attachInfoList">
          <template slot-scope="scope">
            <i v-if="scope.row.attachInfoList!=null && scope.row.attachInfoList.length> 0" class="el-icon-paperclip point main-color"></i>
          </template>
        </el-table-column>
        <el-table-column min-width="150px" prop="title" label="标题" align="left" show-overflow-tooltip sortable="custom"/>
        <el-table-column min-width="200px" prop="detailQueryList" label="收件人" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-for="(o,i) in scope.row.detailQueryList" :key="i" class="inline-block">
              {{ i>0 ? ',' : '' }}{{ o.userName }}{{ o.receiveType===2 ? '(抄送)' : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="消息类型" width="150px" align="center" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ messageTypeMap[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDt" label="发送时间" width="180px" align="center" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="sendDt" label="实际发送时间" width="180px" align="center" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="status" label="状态" align="center" width="120px" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" type="primary">待发送</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              title="查看"
              type="primary"
              circle
              plain
              class="el-icon-view"
              size="mini"
              @click.native.prevent="showMsg(scope.$index, scope.row)"
            />
            <el-button
              title="重发"
              type="primary"
              :disabled="scope.row.status !== 3"
              circle
              plain
              class="el-icon-refresh"
              size="mini"
              @click.native.prevent="reSendMsg(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </zl-table>

  </div>

</template>

<script>
import { Mixin } from '@/utils/mixin'
import ZlTable from '@/components/table/table-con'
import Editor from '@/components/Editor'
import Uploader from '@/components/Uploader/uploader'
import {
  deleteSendMessage,
  reSendFailMessage
} from '@/api/message'
export default {
  name: 'Message',
  mixins: [Mixin],
  components: { ZlTable,Editor,Uploader },
  data() {
    return {
      par: {
        title: '',
        status: null
      },

      loading: false,
      labelWidth: '120px'
    }
  },
  computed: {

  },
  mounted() {

  },
  methods: {
    refreshLayout(){
      this.$refs.table.initTableHeight()
    },
    showMsg(index, row) {
      this.$emit('showMsg',row)
    },
    reSendMsg(index, row) {
      this.$confirm('确定要重新发送吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        reSendFailMessage(row.sendId).then((r)=>{
          this.$message.success('发送成功')
          this.query()
        })
      })
    },
    deleteMsg(index, row) {
      console.log(row)
      const l = this.$refs.table.getSelected()
      if (l.length === 0) {
        this.$message.warning('请选择消息')
        return
      }
      this.$confirm('确定要删除选中的消息吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        deleteSendMessage(l.map(o=>o.sendId)).then((r)=>{
          this.$message.success('删除成功')
          this.query()
        })
      })

    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
